<template>
  <div class="home_container">
    <el-container>
        <!--侧边导航栏-->
        <el-aside :width="isCollapse? '64px':'220px'">
            <!--logo-->
            <div class="logo iconfont icon-fen" :class="isCollapse?'active':''"></div>
            <!--侧边导航-->
            <el-scrollbar 
                style="height: 88%;"
                wrap-style="overflow-x:hidden;">
                <el-menu
                    background-color="#2B2F3A"
                    text-color="#BFBFBF"
                    active-text-color="#66BB6A"
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    :default-active="activePath"
                    @select="handleMenuSelect"
                    router>
                    <el-menu-item 
                        v-if="user.roles[0].id != 3"
                        :index="homePath">
                        <i class="iconfont icon-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <template v-for="(item,index) in menulist">
                        <el-submenu :index="index+''"  :key="index" v-if="item.path != null">
                            <template slot="title">
                                <i :class="item.iconCls"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item
                                v-for="subItem in item.children" 
                                :key="subItem.id"
                                :index="subItem.path">
                                <template slot="title">
                                    <span>{{subItem.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header>
                <!--面包屑-->
                <div class="first">
                    <div class="btn iconfont icon-daohang-zhankai" @click="toggleCollapse"></div>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
                        <el-breadcrumb-item >{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="info">
                    <el-avatar :src="user.imagePath"></el-avatar>
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="index">主页</el-dropdown-item>
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
            <el-footer>Copyright © 2021 exam system  manager possible</el-footer>
        </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data(){
        return {
            user: JSON.parse(window.sessionStorage.getItem("user")),
            //当前选中导航选项
            // homePath:"",
            currentItemIndex: "1",
            //activePath: "",
             //是否折叠
            isCollapse:false,
            //头像url
            avatarUrl: "http://r9p4dk1xk.hn-bkt.clouddn.com/FhNqtBoh5x6QZ9HYV-rIMOGpwPJr"
        }
    },
    created(){
        this.$store.commit("initHomePath",this.user.roles[0].id == 1? "/admin/home":"/teacher/home");
    },
    mounted(){
        
    },
    computed:{
       menulist(){
           return this.$store.state.routes;
       },
       activePath(){
           return this.$store.state.activePath == null ? "": this.$store.state.activePath;
       },
       homePath(){
            return this.$store.state.homePath == null ? "": this.$store.state.homePath;
       }
    },
    methods: {
        //菜单选择事件
        handleMenuSelect(index,indexPath){
            console.log(index);
            console.log(indexPath);
            console.log("菜单选择事件");
            //初始化store中的数据
            this.$store.commit("initknowledgeId","");
            this.$store.commit("initTopicId","");
            this.$store.commit("initExamPaperId","");
            this.$store.commit("initTaskId","");
            this.$store.commit("initUserLogId","");
            this.$store.commit("initClazzId","");
        },
        toggleCollapse(){
            this.isCollapse = !this.isCollapse;
        },
        //下拉菜单点击事件
        handleCommand(command){
            //跳转主页
            if( command == 'index'){
                this.$router.replace((this.homePath==null)?'/home':this.homePath);
            }else if(command == 'userinfo'){ //个人信息
                this.$router.replace("/profile/index");
            }else if( command == 'logout'){ //退出登录

                this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //注销登录
                    this.postRequest('/logout');
                    //清空用户登录
                    window.sessionStorage.removeItem("tokenStr");
                    window.sessionStorage.removeItem("user");
                    //清除菜单数据
                    this.$store.commit('initRoutes',[]);
                    //跳转到首页
                    this.$router.replace("/");
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });

            }
        }
    }
}
</script>

<style lang="scss">
.home_container {
  height: 100%;
}
.el-container{
  height: 100%;
}

.el-aside{
    background-color: $aside-color;
    
    .logo{
        font-size: 50px;
        color: $theme-color;
        height: 63px;
        width: 100%;
        padding: 4px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .active{
         font-size: 25px;
         padding-right: 15px;
    }
    .el-menu{
        width: 100%;
        border-right: none;
        .iconfont{
            font-size: 20px;
            margin-right: 16px;
        }
        .el-menu-item{
            height: 50px;
            display: flex;
            align-items: center;
            vertical-align: middle;
        }
        .el-submenu{
            .el-menu-item{
                 background-color: $list-color !important;
            }
        }
    }
    /* 消除横向滚动条 */
    &::-webkit-scrollbar{
        display: none !important;
    }
}
.el-container.is-vertical{
    transform: translateZ(0);
}
.el-header{
    height: 63px !important;
    padding: 4px 30px !important;
    background: #FFF !important;
    @include prefix(box-shadow,0 2px 4px #0000003b);
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    min-width: 1073px;
    .first{
        display: flex;
        align-items: center;
        justify-content: center;
        .btn{
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%,-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 4px;
            font-weight: bold;
            color:#000;
            background-color: #fff;
            cursor: pointer;
            @include prefix(box-shadow,0 2px 4px #0000003b);
        }
    }
    .info{
        display: flex;
        align-items: center;
        justify-content: center;
        // margin-right: 320px;
        .el-avatar{
            margin-right: 14px;
        }
        .el-dropdown-link{
            font-weight: bold;
        }
    }
}
.el-main{
    background: $main-color;
    margin-top: 63px;
    padding-right: 40px;
    // overflow-x: hidden;
}
.el-footer{
    background: $main-color;
    height: 20px !important;
    font-size: 14px;
    color:#606266;
    text-align: center;
}
</style>